<template>
	<view class="banner">
		<u-swiper :list="bannerlist" height='500rpx'></u-swiper>
	</view>
	<view class="main">
		<view class="title">
			<view class="left"> <up-text :lines="1" size='20' :text="goods.shotMsg"></up-text> </view>
			<view class="right">
				<button open-type="share" class="butt">分享</button>
			</view>
		</view>
		<view class="biaoq">
			<!-- <view v-for="(item,index) in biao" :key="index" class="box">
				<text v-if="index==0&&nier.paramOne!=''">{{item.key}} : {{nier.paramOne.split('_')[1]}}</text>
				<text v-if="index==1&&nier.paramTwo!=''">{{item.key}} : {{nier.paramTwo.split('_')[1]}}</text>
				<text v-if="index==2&&nier.paramThree!=''">{{item.key}} : {{nier.paramThree.split('_')[1]}}</text>
				<text v-if="index==3&&nier.paramFour!=''">{{item.key}} : {{nier.paramFour.split('_')[1]}}</text>
				<text v-if="index==4&&nier.paramFive!=''">{{item.key}} : {{nier.paramFive.split('_')[1]}}</text>
				<text v-if="index==5&&nier.paramSix!=''">{{item.key}} : {{nier.paramSix.split('_')[1]}}</text>
			</view> -->
			<!-- <view>需要 : {{targetCategory}}</view> -->
			<view>估价 : {{goodsShow.valuationPrice}} 元</view>
		</view>
		<view class="biaoq">
			<view>{{goodsShow.address}}</view>
		</view>
		<view class="xiangqing">
			{{goods.shotMsg}}
		</view>
		<view class="tupian">
			<!-- 	<view class="tupianBox" v-for="item,index in bannerlist" :key="index">
				<u-image :show-loading="true" :src="item" width="210rpx" height="210rpx" radius='20rpx'></u-image>
			</view> -->
			<image :src="item" v-for="item,index in bannerlist" :key="index" @click="clickImg(item)">
			</image>
		</view>
	</view>
	<view class="quanbu">
		<view class="jibenmiao">
			<button class="huoque" @click="getContactInfo" :loading="loading" v-if="!show">获取联系方式</button>
			<view class="xxitainxie" v-if="show">
				<view class="biaota"> 重要信息（此信息付费后可以获取） </view>
				<view class="iuno">
					<!-- <view class="yi">
						<view class="biaot">
							所在位置
						</view>
						<view class="kuang">
							{{goodsShow.address}}
						</view>
					</view> -->
					<view class="yi">
						<view class="biaot"> 联系人 </view>
						<view class="kuang">
							{{goodsShow.publisher}}
						</view>
					</view>
					<view class="yi">
						<view class="biaot"> 联系方式 </view>
						<view class="kuang">
							{{goodsShow.concat}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="dangchukuan" v-show="denglumtk">
		<view class="neirdeli">
			<view class="titlebiaoti"> 您还未登录,请先登录！ </view>
			<view class="qianqudenglu">
				<button class="getphonebtn" @click="danchukuan"> 关闭</button>
				<button class="getphonebtn" open-type="getPhoneNumber" @getphonenumber="bindGetUserInfo">
					微信快捷登录</button>
				<!-- <button class="getphonebtn" v-if="!wx" @click="bindGetUserInfo"> 微信快捷登录</button> -->
			</view>
			<view class="xiamian">
				<view class="yuedu">
					<image src="../../static/unaquna.png" v-if="duihao" mode="" @click="duihaa"></image>
					<image src="../../static/duihao.png" v-if="yuanqunaduig" mode="" @click="duihab"></image>
				</view>
				<view class="zhiti"> 我已阅读并同意 <view class="yogh" @click="handleOpenPrivacyContract"> 用户隐私协议、 </view>
					<view class="yiexsi" @click="handleOpenPrivacyContract"> 隐私协议 </view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		infCollection,
		details,
		getContact,
		memberVipPay,
		newgetOpenId,
	} from "@/request/api.js"
	export default {
		data() {
			return {
				duihao: true,
				yuanqunaduig: false,
				denglumtk: false, //前去登录模态框
				modalShow: false,
				targetCategory: '',
				bannerlist: [],
				url: '',
				loading: false,
				show: false,
				value: '',
				goods: {
					image: '',
					tags_dictText: ''
				},
				goodsShow: {},
				detailsDataa: [],
				biao: [],
				nier: '',
				informationPrice: ''
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '广告火了',
				path: '/pages/index/index',
				success: function(res) {
					console.log('成功', res)
				}
			}
		},
		onLoad(option) {
			// 获取全局变量
			const app = getApp();
			const url = app.globalData.url + '/';
			// 解析传递的数据
			this.goods = JSON.parse(option.detalis);
			this.bannerlist = [];
			if (this.goods.image) {
				const imageList = this.goods.image.split(',');
				this.bannerlist = imageList.map(image => url + 'detail/' + image);
			}
			if (this.goods.infoId) {
				this.goods.id = this.goods.infoId
			}
			console.log(this.bannerlist, '轮播图');
			console.log(this.goods, '信息');
			this.requestDataByKeya()
		},
		methods: {
			danchukuan() {
				console.log('收回');
				this.denglumtk = false
			},
			bindGetUserInfo(e) {
				let that = this;
				if (that.yuanqunaduig === false) {
					wx.showToast({
						title: '请勾选用户隐私协议、隐私协议',
						icon: 'none'
					});
					return;
				}
				// #ifdef APP
				uni.navigateTo({
					url: "./Sign"
				})
				// #endif
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg != 'getPhoneNumber:ok') {
					wx.showToast({
						title: '您拒绝了授权',
						icon: 'none'
					});
					return;
				}
				console.log(e);
				that.jiamiinfo = e.detail;
				that.loginsa();
				// #endif
			},
			loginsa() {
				let that = this
				wx.showLoading({
					title: '登录中',
				})
				uni.login({
					success: res => {
						console.log(res, 'jjjj')
						newgetOpenId({
							code: res.code,
							data: that.jiamiinfo.encryptedData,
							iv: that.jiamiinfo.iv,
						}).then(responts => {
							console.log(responts);
							const infos = responts.result;
							if (responts.success) {
								uni.hideLoading()
								that.userInfo = responts.result.memberInfo
								uni.setStorageSync('userInfo', JSON.stringify(infos.memberInfo));
								uni.setStorageSync('token', infos.token);
								that.denglumtk = false
							} else {
								uni.hideLoading()
								uni.showToast({
									title: responts.message,
									icon: 'none'
								});
							}
						})
					}
				})
			},
			duihaa() {
				this.duihao = false
				this.yuanqunaduig = true
			},
			duihab() {
				this.yuanqunaduig = false
				this.duihao = true
			},
			closeModal() {
				this.modalShow = false
				this.getLoginType()
			},
			clickImg(e) {
				uni.previewImage({
					urls: [e], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			getContactInfo() {
				let that = this
				if (!uni.getStorageSync('token')) {
					this.denglumtk = true
					return;
				}
				this.loading = true
				getContact(this.goods.id).then(res => {
					console.log(res);
					if (res.success) {
						this.show = true
						this.loading = false
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.showModal({
								title: '次数不足',
								content: '是否选择支付该信息？',
								success: function(res) {
									if (res.confirm) {
										that.buyPrice()
									} else if (res.cancel) {
										that.loading = false
									}
								}
							});
						}, 500)
					}
				})
			},
			buyPrice() {
				let that = this
				let payAmount = 0
				if (that.goods.type == 1) {
					payAmount = that.goods.memberContactPrice
				} else {
					payAmount = that.goods.officialContactPrice
				}
				memberVipPay({
					memberId: JSON.parse(uni.getStorageSync('userInfo')).id,
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					infoId: that.goods.id,
					payAmount: payAmount
				}).then(data => {
					console.log(data);
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.result.timeStamp,
						nonceStr: data.result.nonceStr,
						signType: data.result.signType,
						paySign: data.result.paySign,
						package: data.result.packageVal,
						success: function(res) {
							that.show = true
							that.loading = false
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							that.loading = false
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			},
			clickImg(e) {
				uni.previewImage({
					urls: [e], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			Collection(e) {
				infCollection(e).then(res => {
					console.log(res);
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				})
			},
			requestDataByKeya() {
				this.loading = true
				details({
					id: this.goods.id
				}).then(res => {
					console.log(res, '详情');
					if (res.success) {
						this.targetCategory = res.result.targetCategory.name
						this.goodsShow = res.result.informationBase
						this.biao = res.result.categoryBase.secondCategoryVo
						this.nier = res.result.categoryParams
						this.informationPrice = res.result.informationPrice
						console.log(this.biao);
						// this.show = true
					} else {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: "none"
						// })
					}
					this.loading = false
				})
			},
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>
<style scoped lang="less">
	.main {
		border-radius: 70rpx 70rpx 0 0;
		background-color: #fff;
		position: relative;
		top: -30rpx;

		.tupian {
			padding: 0 20rpx;
			display: flex;
			flex-wrap: wrap;

			// justify-content: space-evenly;
			.tupianBox {
				margin-bottom: 20rpx;
				margin-right: 25rpx;
			}

			image {
				margin-bottom: 20rpx;
				margin-right: 25rpx;
				border-radius: 20rpx;
				// padding: 20rpx;
				width: 210rpx;
				height: 210rpx;
			}
		}

		.xiangqing {
			font-size: 24rpx;
			color: #AAAAAA;
			padding: 10rpx 55rpx;
			line-height: 1.8;
		}

		.biaoq {
			display: flex;
			flex-wrap: wrap;
			padding: 0 55rpx;
			font-size: 28rpx;

			.box {
				width: 50%;
				padding: 5rpx 0;
			}
		}

		.title {
			padding: 60rpx 48rpx 20rpx 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 50%;
				font-size: 48rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.banner {
		/deep/.u-swiper {
			border-radius: 0 !important;
		}
	}

	.quanbu {
		width: 702rpx;
		margin: 0 auto;
		padding-bottom: 40rpx;
	}

	.jibenmiao {
		margin: 0 auto;
		margin-bottom: 24rpx;
		margin-top: 20rpx;
	}

	.neir {
		line-height: 50rpx;
		white-space: pre-wrap;
	}

	.huoque {
		margin: 0 auto;
		margin-top: 61rpx;
		width: 380rpx;
		background: #F8492E;
		border-radius: 50rpx;
		border: none;
		font-weight: 400;
		font-size: 32rpx;
		color: #FDFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.kuang {
		width: 80%;
		margin-left: 5rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		background-color: #FAFAFA;
	}

	/deep/.u-input {
		color: #333333;
		border: none;
		background-color: #FAFAFA;
	}

	.yi {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.biaot {
			width: 20%;
			font-size: 28rpx;
		}
	}

	.u-inpu {
		height: 96rpx !important;
	}

	.iuno {
		width: 100%;
		font-size: 28rpx;
	}

	.biaota {
		font-size: 30rpx;
		font-weight: 700;
		margin-top: 40rpx;
		margin-bottom: 10rpx;
	}

	.nai {
		display: flex;
		align-items: center;
	}

	button {
		outline: none;
	}

	.butt {
		background-color: #F8492E;
		color: #fff;
		border-radius: 32rpx;
	}

	.dangchukuan {
		// opacity: 0.7;
		position: fixed;
		left: 50%;
		top: 50%;
		// transform: translate(-50%, -50%);
		z-index: 99999;

		.neirdeli {
			width: 700rpx;
			height: 500rpx;
			background-color: #FAFAFA;
			margin: 0 auto;
			// margin-top: 400rpx;
			position: absolute;
			// left: 0;
			// top: 0;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 20rpx;
			padding-bottom: 34rpx;
			box-sizing: border-box;
		}

		.titlebiaoti {
			width: 700rpx;
			height: 200rpx;
			text-align: center;
			font-size: 43rpx;
			line-height: 300rpx;
			// border-bottom: 2rpx solid #55ff00;
		}

		.qianqudenglu {
			width: 700rpx;
			height: 200rpx;
			text-align: center;
			display: flex;
			line-height: 200rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			border-radius: 20rpx;
		}
	}

	.xiamian {
		width: 700rpx;
		height: 100rpx;
		text-align: center;
		display: flex;
		line-height: 200rpx;
		color: #000000;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		padding-left: 34rpx;
		box-sizing: border-box;
	}

	.zhiti {
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 4rpx;
		font-size: 24rpx;
	}

	.yuedu {
		// width: 54rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		line-height: 100rpx;
	}

	.yuedu image {
		width: 30rpx;
		height: 30rpx;
	}

	.yogh {
		color: #94e75d;
	}

	.yiexsi {
		color: #94e75d;
	}

	.getphonebtn {
		// width: 100%;
		// height: 100%;
		width: 300rpx;
		height: 100rpx;
		background-color: #ff5d3d;
		// margin-top: 30rpx;
		font-size: 30rpx;
		display: flex;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		border: 1rpx solid #eee;
	}
</style>